Estoy confundido acerca de la notificación 'animationcomplete' completa'. Pensé que recibiría la notificación una vez cuando termine la animación que escucho. Resulta que recibiré la notificación n veces. Aquí está el código.
class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } preload() { this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 }); } create() { this.anims.create({ key: 'win', frames: this.anims.generateFrameNumbers('brawler', { frames: [ 30, 31 ] }), frameRate: 8, repeat: 0, }); const cody = this.add.sprite(200, 70); cody.setScale(8); let btn = this.add.rectangle(500, 70, 200, 150, '#000') this.add.text(500, 70, 'click') btn.setInteractive(); btn.on('pointerdown', () => { console.log('pointerdown'); cody.play('win'); cody.on('animationcomplete', (e) => { console.log(e.key); }); }); } } var config = { width: 800, height: 500, backgroundColor: '#555', scene: [BootScene] } var game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script> Puse dos console.log allí, uno para pointerdown y el otro para animationcomplete .
La primera vez que hago clic en el btn , obtengo un pointerdown y una animationcomplete completa. La segunda vez que hago clic en el btn , obtengo un pointerdown y dos animationcomplete completas.
¿Cómo obtengo solo una animationcomplete sin importar que haga clic en la btn vez?
Como mencionó @Ourobours , está adjuntando, en cada clic, un nuevo controlador de eventos para animationcomplete .
An Dado que puede adjuntar varios controladores de eventos para el mismo evento, todos ellos se ejecutarán la próxima vez que se active, y así sucesivamente.
Solo tendría que mover el controlador de eventos animationcomplete fuera de la función del controlador de eventos pointerdown , y todo debería funcionar como se espera.
Aquí una demostración de trabajo:
class BootScene extends Phaser.Scene { constructor() { super({ key: 'BootScene' }); } preload() { this.load.spritesheet('brawler', 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 }); } create() { this.anims.create({ key: 'win', frames: this.anims.generateFrameNumbers('brawler', { frames: [ 30, 31 ] }), frameRate: 8, repeat: 0, }); const cody = this.add.sprite(200, 70); cody.setScale(8); let btn = this.add.rectangle(500, 70, 200, 150, '#000') this.add.text(500, 70, 'click') btn.setInteractive(); cody.on('animationcomplete', (e) => { console.log(e.key); }); btn.on('pointerdown', () => { console.log('pointerdown'); cody.play('win'); }); } } var config = { width: 800, height: 500, backgroundColor: '#555', scene: [BootScene], banner:false } var game = new Phaser.Game(config); <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>